<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id="flower" src="img/1.jpg" alt="" width="200px" height="200px">
    <br>
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
    <script type="">
       // 1.获取元素，2绑定事件，3事件处理函数
       var flower=document.getElementById('flower');
       var prevBtn=document.getElementById('prev');
       var nextBtn=document.getElementById('next');
       var minIndex=1;maxIndex=4;currentIndex=minIndex;
       nextBtn.onclick=function(){
         if(currentIndex===maxIndex){
             currentIndex=minIndex;//如果当前索引为最大值，就轮回，把最小值赋值给它
         }else{
             currentIndex++;
         }
         flower.setAttribute('src','img/${currentIndex}.jpg')//设置路径属性
       }
       prevBtn.onclick=function(){
           if(currentIndex===minIndex){
               currentIndex=maxIndex;
           }else{
               currentIndex--;
           }
           flower.setAttribute('src','img/${currentIndex}.jpg')
       }

    </script>
</body>
</html>